<template>
  <div class="custom-portrait">
    <!-- 整体样式 -->
    <div class="component-container">
      <!-- 上部分 -->
      <div class="drawcontainer">
        <div style="display: flex; flex-direction: column"></div>
        <div class="drawheader">
          <!-- 返回按钮 -->
          <div class="back">
            <i class="el-icon-arrow-left" @click="goBack">返回</i>
          </div>
          <div class="headtext">
            <img src="@/assets/logo/logo.png" alt="" />
            <!-- 文字部分 -->
            <div style="width: calc(100% - 180px)">
              <div class="headtitle">1212</div>
              <!-- 内容部分 -->
              <div class="headcontent">
                <div class="headbox">
                  <p class="boxtitle">资产编号</p>
                  <span class="boxcontent">GB0205007</span>
                </div>
                 <div class="headbox">
                  <p class="boxtitle">IP地址</p>
                  <span class="boxcontent">192.168.10.12</span>
                </div>
                    <div class="headbox">
                  <p class="boxtitle">MAC</p>
                  <span class="boxcontent">7C214A5ACDE6</span>
                </div>
                    <div class="headbox">
                  <p class="boxtitle">是否国产化</p>
                  <span class="boxcontent">国产</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 隐藏内容区域 -->
        <div>
          <div v-show="!showMore">
            <div class="content-box">
              <!-- tabs -->
              <el-tabs type="border-card">
                <!-- 属性信息板块 -->
                <el-tab-pane label="属性信息">
                  <div class="drawmain">
                    <div class="tips" style="margin-top: 20px">基础数据</div>
                  </div>
                  <el-row
                    style="
                      border-right: 1px solid rgb(235, 238, 245);
                      border-bottom: 1px solid rgb(235, 238, 245);
                    "
                  >
                    <el-col :span="8" v-for="i in 21" :key="i">
                      <div class="grid-content bg-purple">
                        <div class="basic-row">
                          <div class="basic-row-label">设备类型</div>
                          <div class="basic-row-value">{{i}}</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="grid-content bg-purple">
                        <div class="basic-row">
                          <div class="basic-row-label">备注</div>
                          <div class="basic-row-value">你好</div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <div class="basic-row">
                          <div class="basic-row-label">采购日期</div>
                          <div class="basic-row-value">今天</div>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <!-- 第一个表格 -->
                  <div class="tips" style="margin-top: 20px">业务数据</div>
                  <div class="business-data-title">其他IP地址、MAC</div>
                  <el-table
                    style="width: 100%"
                    :data="tableData"
                    height="206"
                    :header-cell-style="{ background: '#F3F5FC' }"
                    border
                  >
                    <el-table-column type="index" width="50" label="序号">
                    </el-table-column>
                    <el-table-column prop="address" label="ip地址">
                    </el-table-column>
                    <el-table-column prop="mac" label="mac"> </el-table-column>
                  </el-table>
                  <br />
                  <!-- 第二个表格 -->

                  <div class="business-data-title">硬盘序列号/硬盘空间</div>
                  <el-table
                    style="width: 100%"
                    :data="tableData"
                    height="206"
                    :header-cell-style="{ background: '#F3F5FC' }"
                    border
                  >
                    <el-table-column type="index" width="50" label="序号">
                    </el-table-column>
                    <el-table-column prop="address" label="硬盘序列号">
                    </el-table-column>
                    <el-table-column prop="mac" label="硬盘空间">
                    </el-table-column>
                  </el-table>
                  <!-- 第三个表格 -->
                  <div class="tips" style="margin-top: 20px">拓展数据</div>
                  <el-table
                    style="width: 100%"
                    :data="tableData"
                    height="206"
                    :header-cell-style="{ background: '#F3F5FC' }"
                    border
                  >
                    <el-table-column type="index" width="50" label="序号">
                    </el-table-column>
                    <el-table-column prop="address" label="拓展属性">
                    </el-table-column>
                    <el-table-column prop="mac" label="属性值">
                    </el-table-column>
                  </el-table>
                </el-tab-pane>

                <el-tab-pane label="运行监测信息">
                  <div
                    class="drawmain"
                    style="
                      padding-top: 15px;
                      margin-left: -15px;
                      width: calc(100% + 15px);
                    "
                  >
                    <el-tabs tab-position="left" style="height: 200px">
                      <el-tab-pane label="用户管理">
                        <div class="dateFilter">
                          <el-date-picker
                            v-model="value2"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                          >
                          </el-date-picker>
                        </div>
                      </el-tab-pane>
                      <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                      <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                      <el-tab-pane label="定时任务补偿"
                        >定时任务补偿</el-tab-pane
                      >
                    </el-tabs>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <!-- 切换隐藏的按钮 -->
          <div class="opt-btn">
            <el-button
              icon="el-icon-arrow-down"
              v-show="showMore"
              @click="showMore = false"
              >展开</el-button
            >
            <el-button
              icon="el-icon-arrow-up"
              v-show="!showMore"
              @click="showMore = true"
              >收起</el-button
            >
          </div>
          <!-- 最下面的数据 -->
          <div class="protrait">
            <div class="edit-el-main">
              <div class="check-portrait">
                <div style="width: 33%; height: 310px" v-for="i in 3" :key="i">
                  <el-card class="box-card">
                    <div
                      slot="header"
                      class="clearfix"
                      style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                      "
                    >
                      <div style="width: 68%">
                        <div class="el-card-title">事件分类统计</div>
                        <div class="el-card-label">最新计算时间：-</div>
                      </div>
                      <div style="width: 32%; text-align: right">
                        <el-select
                          v-model="date"
                          placeholder="请选择"
                          size="mini"
                        >
                          <el-option value="day">近一天 </el-option>
                          <el-option value="week">近一周 </el-option>
                          <el-option value="month">近一月 </el-option>
                        </el-select>
                        <i class="el-icon-refresh"></i>
                      </div>
                    </div>
                    <div>暂无数据</div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      showMore: true, //是否显示更多
      tableData: [],
      date: "day",
      value2: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    ...mapMutations(["portrait/changeShowtab1"]),
    goBack() {
      this.$router.go(-1);this["portrait/changeShowtab1"](true)
    }
  },
};
</script>

<style lang="scss" scoped>
.custom-portrait {
  height: 100%;
  .component-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #dde4ee;
    // 顶部
    .drawcontainer {
      //padding: 10px 10px 0 10px;
      width: 100%;
      background: #EEF0F5;
      //background: #dde4ee;
      .drawheader {
        background-color: #fdfdfd;
        border-radius: 6px;
        // 返回按钮
        .back {
          line-height: 40px;
          height: 40px;
          border-bottom: 1px solid #e9e9e9;
          color: #989a9c;
          padding: 0 20px;
        }
        // 文字区域
        .headtext {
          width: 100%;
          display: flex;
          align-items: center;
          img {
            float: left;
            padding-right: 20px;
            height: 100px;
            margin: 20px;
          }
          .headtitle {
            white-space: nowrap;
            font-weight: 700;
            font-style: normal;
            font-size: 16px;
            color: #303032;
            padding-top: 20px;
            width: 100%;
          }
          .headcontent {
            display: inline-block;
            margin-top: 20px;
            width: 100%;
            .headbox {
              display: inline-block;
              width: 16%;
              float: left;
              padding-right: 20px;
              .boxtitle {
                margin-top: 0;
                width: 100%;
                height: 14px;
                margin-bottom: 20px;
                font-size: 14px;
                color: #505255;
              }
              .boxcontent {
                height: 16px;
                width: 100%;
                margin-bottom: 20px;
                font-size: 14px;
                color: #303032;
                overflow: hidden;
                display: inline-block;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
      .content-box {
        height: 100%;
        width: 100%;
        overflow: hidden;
        background: #fff;
        margin-top: 10px;
        border-radius: 6px;
        box-sizing: border-box;
        .drawmain {
          overflow-y: auto;
          background-color: #fff;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
        }
        .business-data-title {
          margin-bottom: 10px;
        }
      }
      // 最下面数据
      .protrait {
        padding-top: 10px;
        .edit-el-main {
          background-color: #dde4ee;
          height: 100%;
          overflow: auto;

          .check-portrait {
            height: 330px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .basic-row {
        border: 1px solid #e8eaec;
        display: flex;
        align-items: center;
        height: 48px;
        margin: 0 -1px -1px 0;
        .basic-row-label {
          width: 200px;
          height: 100%;
          padding-right: 12px;
          background: #eff4f8;
          font-size: 14px;
          line-height: 48px;
          color: #303032;
          direction: ltr;
          font-weight: 400;
          text-align: right;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .basic-row-value {
          width: calc(100% - 200px);
          height: 100%;
          padding-left: 15px;
          font-size: 14px;
          line-height: 48px;
          color: #505255;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }

    .opt-btn {
      text-align: center;
      -webkit-transform: translateY(-2px);
      transform: translateY(-2px);
      position: absolute;
      left: 48%;
      z-index: 1;
    }
  }
}
// 去掉中间的外边距
.el-button + .el-button {
  margin-left: 0;
}
.el-table--group, .el-table--border{
  border: none;
}
.dateFilter {
  display: flex;
  justify-content: flex-start;
  height: 32px;
  margin-left: 7px;
}
</style>
<style lang="scss">
// 卡片部分
.custom-portrait {
  overflow: auto;
  .el-card {
    height: 100%;
  }
  .el-card__header {
    padding: 16px 12px 0 12px;
    position: relative;
    border: none;
    &::before {
      content: "";
      width: 4px;
      height: 14px;
      background: #2979ff;
      position: absolute;
      left: 0;
      top: 18px;
    }
    .el-card-title {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      color: #303032;
      font-weight: 700;
    }
    .el-card-label {
      font-size: 12px;
      color: #95989c;
      font-weight: 400;
      padding-top: 8px;
    }
    .el-select {
      width: 67%;
      margin-right: 4%;
      text-align: left;
    }
    .el-card__body {
      padding: 0;
      height: calc(100% - 53px);
    }
  }
.el-tabs__content{
    height: 100%;
    overflow: auto;
}
.el-tabs--border-card > .el-tabs__content{
  padding: 20px;
}
}
</style>
